/*
 * Copyright 2020 Google LLC
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *    https://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

body {
  font-family: 'Roboto', sans-serif;
}

.hidden {
  display: none;
}

.reverseDisplay {
  transform: scale(-1, 1);
}

.errorMessage {
  color: red;
}

.frameExtractionComplete {
}

.frameExtractionIncomplete {
  background-color: HoneyDew;
}

.frameExtractionFailed {
  background-color: MistyRose;
}

.trainingDone {
}

.trainingNotDone {
  background-color: HoneyDew;
}

.waitCursor {
  cursor: wait;
}

.pointerCursor {
  cursor: pointer;
}

.rightText {
  text-align: right;
}

.text-12 {
  font-size: 12px;
}

.text-14 {
  font-size: 14px;
}

.text-16 {
  font-size: 16px;
}

.text-18 {
  font-size: 18px;
}

.text-20 {
  font-size: 20px;
}

.text-22 {
  font-size: 22px;
}

.text-24 {
  font-size: 24px;
}

.text-36 {
  font-size: 36px;
}

.margin-top-bottom {
  margin-top: 10px;
  margin-bottom: 4px;
}

.vr {
  height: 100px;
  margin-left: 5px;
  border-left: 1px solid gray;
  margin-right: 5px;
}

.collapsedBorder {
  border-collapse: collapse;
}

.cellWithBorder {
  border: 1px solid #ccc;
  padding: 8px;
}

.borderTopNone {
  border-top: none;
}

.cellWithBorderLeftPadding {
  border: 1px solid #ccc;
  padding-left: 2px;
}

.labelCellInModelTable {
  width: 50%;
  padding: 16px;
  vertical-align: top;
  align: right;
}

.valueCellInModelTable {
  width: 50%;
  padding: 16px;
  vertical-align: top;
}

.buttonWithoutBorder {
  padding: 0px 8px 0px 8px;
  border: none;
  background: none;
  vertical-align: bottom;
}

.iconVerticalAlign {
  vertical-align: middle;
}

.inputWithoutBorder {
  padding: 0;
  border: none;
}

#labelingAreaTable {
	background: #ffffff;
}

#bboxCanvas {
	-webkit-user-select: none;
	-webkit-user-drag: none;
}

#scalarsDiv {
  overflow: scroll;
}

#evalImagesDiv {
  overflow: scroll;
  border-top: 1px solid #ccc;
}

.pageButtonsDiv {
  border: none;
}


/* Loader */

.loader {
  display: inline-block;
  border: 4px solid #ffffff;
  border-top: 4px solid #3366cc;
  border-radius: 50%;
  width: 12px;
  height: 12px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

body {
    background: #f9f9f9 !important;
}

:root {
	--program-color: #f57e25;
}

.navbar-dark {
    background: #231F20;
    border-bottom: 5px solid #F57E25;
    box-shadow: 0 1px 0 0 rgba(0,0,0,.6);
}

.navbar-dark .navbar-nav .nav-link {
	color: rgba(255, 255, 255, 0.7) !important;
}

.navbar-dark .navbar-nav .nav-link:focus,
.navbar-dark .navbar-nav .nav-link:hover {
	color: rgba(255, 255, 255, 1) !important;
}

#bodywrapper > .container {
	background: #ffffff;
	box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
}

.no-height { /* Used for horizontal filler items */
	height:0px !important;
	margin-top:0px !important;
	margin-bottom:0px !important;
}

td.col-1, th.col-1 {
	width: 08.83%;
}

td.col-2, th.col-2 {
	width: 16.66%;
}

td.col-3, th.col-3 {
	width: 25%;
}

td.col-4, th.col-4 {
	width: 33.33%;
}
span.line {
  display: inline-block;
}

.redAllianceBG {
	background: #ED1C24;
}

.blueAllianceBG {
	background: #0066B3;
}

.redAllianceText {
	color: #ED1C24;
}

.blueAllianceText {
	color: #0066B3;
}

body {
	font-family: "Roboto","Arial",sans-serif;
}

.ftc-icon {

}

.ftc-icon-first {
	display: block;
	text-indent: -9999px;
	background-image: url("");
	background-size: 100% 100%;
	height: 100%;
	background-position: center;
	background-repeat: no-repeat;
}


#versionHeader {
	background: red;

	color:#ccc;
	padding:2px;
}

#versionHeader.productionEnv {
	background: #231F20;
}
#versionHeader.emulateProd {
	background: #231F20 !important;
}
#versionHeader.stagingEnv {
	background: purple;
}
#versionHeader.developmentEnv {
	background: green;
}

#versionHeader.emulateProd > .nonProdBanner {
	display: none;
}

#masqueradeFooter {
	background: purple;
	color: white;
	position: absolute;
	bottom: 0;
	width: 100%;
	padding: 8px;
}

#bodywrapper.masquerading {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: auto; /* moves scrollbars inside border */
	border-width: 4px;
	border-color: purple;
	border-style: solid;
}

@media print
{
	#sponsorCarouselContainer, footer
	{
		display: none !important;
	}
}

.cell-link {
	display: block;
	text-decoration: none;
	color: inherit;
	height: 100%;
	margin: -0.75rem;
	padding: 0.75rem;
}

.cell-link:hover {
	text-decoration: none;
	color: inherit;
}

.white { color: #fff !important; }

#logoutButton { cursor: pointer; }

.navbar {
  padding: .5rem 1rem;
}

.table {
    font-size:12px;
}

.table-hover tbody tr:hover td, .table-hover tbody tr:not(:first-child):hover {
    background-color: #e0e6e0;
}

.tba-badge {
    font-size: 12px;
}

a:not([href]):not([tabindex]).tableShift {
    color: #007bff;
    cursor: pointer;
}

form {
    margin-block-end: 1em;
}

#requestsLink {
    white-space: nowrap;
}
#requestsLink span {
    position: relative;
    font-size: 10px;
    top: -10px;
}

/* Tooltips */

.hasTooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.hasTooltip .isTooltipText {
  visibility: hidden;
  width: 300px;
  background-color: #FFDEAD;
  color: black;
  border-radius: 6px;
  padding: 0 10px;
  margin-left: 5px;

  /* Position the tooltip */
  position: absolute;
  z-index: 1;
}

.hasTooltip:hover .isTooltipText {
  visibility: visible;
}

.noWrap {
    white-space: nowrap;
}

.margin-right-10 {
  margin-right: 10px;
}

.orange-border {
  border: 8px solid #fd7e14;
}
